<template>
  <div class="dl-row-sb class-box mar-bottom bodyClass" v-loading="loading">
    <div class="left">
		<div v-if="courseChapterList.length>0">
		  <div v-for="(item, index) in courseChapterList" :key="index" class="class-main">
			<h3>{{ item.label }}</h3>
			<div v-for="(i, index1) in item.courseResourceList" :key="index1"  @click="toVideo(i)" class="item dl-row-sb center" :class="courseResId==i.id?'state':''" >
			  <p>{{i.resourceName}}</p>
			  <div>
				<el-link  style="font-size:13px;margin-right: 10px;" :underline="false">下载</el-link>
				<span>{{i.classHour | formateDate}}</span>
			  </div>
			  <div v-if="i.id==courseResId" class="state-box">当前学习</div>
			</div>
		  </div>
	  </div>
	  <div class="note-box mar-top-20" v-if="courseChapterList.length==0">
	  	<el-empty :image-size="250" :image="require('../../../assets/no_data_images/no_chapter.png')" ></el-empty>
	  </div>
    </div>
    <div class="right">
      <!-- <div class="dl-column center right-btn mar-bottom-20" v-show="activeIndex">
			<div  style="color: #2868b0;margin-bottom: 5px;"><span><i class="el-icon-time"></i>&nbsp;上次学至:{{personStudyInfoObj.courseResourceName}}</span></div>
			<el-button class="big-btn-success" @click="continueStudy"><i class="el-icon-position"></i>&nbsp;继续学习</el-button>
      </div>
	  <div class="dl-column center right-btn mar-bottom-20" v-show="!activeIndex">
	  		<el-button class="big-btn-success" @click="startStudy"><i class="el-icon-position"></i>&nbsp;开始学习</el-button>
	  </div> -->
      <div class="score-box dl-column center">
        <h2>综合评分</h2>
        <div style="font-weight: 600;">{{courseScore.score}}&nbsp;分</div>
        <el-rate v-model="courseScore.score" disabled :colors="colors">
        </el-rate>
        <el-button type="success" @click="gradeForm()" round><i class="el-icon-notebook-1"></i>&nbsp;我要评价</el-button>
      </div>
      <div class="score-box dl-column center">
      <!-- <img :src="userImg"> -->
        <h5 style="font-weight: 500;">学习进度</h5>
       <!-- <p>曾就职于百度，主导参与多个前端开发项目，积累了大量实战经验。</p> -->
	   <el-progress :stroke-width="12" color="#0068B6" type="circle"  :percentage="studyPercent"></el-progress>
      </div>
	  <course-grade-form ref="gradeFrom"></course-grade-form>
    </div>
</div>
</template>

<script>
	import { formatSeconds } from '@/utils/index'
	import { personStudyInfo,personCourseStudyPercent } from '@/api/course'
	import courseGradeForm from './courseGradeForm.vue'
	export default {
		components: {courseGradeForm},
		props:{
			courseChapterList:{
			  type:Array,
			  default:null,
			},
			couserObj:{
				type:Object,
				default:null,
			},
			courseScore:{
				type:Object,
				default:null,
			}
		},
	   data() {
		return {
		  loading:false,
		  courseResId: this.$route.query.id,
		  personStudyInfoObj:{},
		  studyPercent: 0.00,
		  userImg: require('../../../assets/image/u353.png'),
		  colors: ['#f6fbef', '#F7BA2A', '#FF9900'],
		}
	  },
	  filters: {
	    formateDate (time) {
	      return formatSeconds(time)
	    }
	  },
	  created() {
	  	this.$nextTick(() => {
			this.getPersonCourseStudyPercent()
	  	})
	  },
	  methods: {
		getPersonCourseStudyPercent(){
			var params={
				courseId:this.$route.query.courseId
			}
			personCourseStudyPercent(params).then(res=>{
				this.studyPercent=res.nowStudyPercent
			})
		},
		gradeForm(){
			this.$refs.gradeFrom.dialog = true
			this.$refs.gradeFrom.form.courseId = this.couserObj.id
		  },
		toVideo(row) {
		  let routeData =this.$router.push({ path: "/course/video", query: { id: row.id,courseId:this.couserObj.id,taskId:this.$route.query.taskId} })
		  this.$router.go(0);
		  sessionStorage.setItem("resourceId",row.id);
		  sessionStorage.setItem("taskId",this.$route.query.taskId);
		},
		continueStudy(){//继续学习
		    //this.$router.push({ path: "/course/video", query: { id: this.personStudyInfoObj.courseResourceId,courseId:this.couserObj.id} })
			//this.$parent.$refs.dplayer.continuePlay();
		},
		startStudy(){//继续学习
			//this.$parent.$refs.dplayer.startPlay();
		}
	  },
	}
</script>

<style lang="scss" scoped>
	.bodyClass{
		min-height: calc(100vh - 595px);
	}
</style>